<template>
  <el-dialog title="编辑" :visible.sync="show" :before-close="beforeClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item :label="itemName" prop="itemName">
        <el-input type="text" v-model="itemNameValue" readonly></el-input>
      </el-form-item>
      <el-form-item :label="delay" prop="delayValue">
        <el-input type="text" v-model.number="ruleForm.delayValue"></el-input>
      </el-form-item>
      <el-form-item :label="delayFlex" prop="delayFlexValue">
        <el-select v-model="ruleForm.delayFlexValue" placeholder="请选择">
          <el-option v-for="item in delayFlexOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="update('ruleForm')">提交</el-button>
        <el-button @click="close('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import api from 'api/device'
import eventHubs from 'common/eventHubs'
export default {
  name: 'itemPropertiesUpdate',
  components:{
    api
  },
  data() {
    return {
      show:false,
      itemid:'',
      itemNameValue: '',
      ruleForm: {
        delayValue: 30,
        delayFlexValue: ''
      },
      rules: {
        delayValue: [{ type: 'number', required: true, message: '请输入数据更新间隔（单位秒）', trigger: 'change' }],
        delayFlexValue: [{ message: '请选择任务计划', trigger: 'change' }]
      },
      delayFlexOptions: [
        { label: '请选择', value: '' },
        { label: '50秒/7*24小时', value: '50/1-7,00:00-24:00' },
        { label: '周一至周五早上9点晚上18点', value: 'wd1-5h9-18' },
      ],
      delay: this.$t('delay'),
      itemName: this.$t('itemName'),
      delayFlex: this.$t('delayFlex')
    }
  },
  methods: {
    setData(row){
      this.itemid = row.itemid?row.itemid:''
      this.itemNameValue = row.name?row.name:''
      this.ruleForm.delayValue = row.delay?parseInt(row.delay):0
      this.ruleForm.delayFlexValue = row.delay_flex?row.delay_flex:''
    },
    close(formName) {
      const self = this
      self.reset(formName);
      eventHubs.getEventHub().$emit('closeItemProperties');
      self.closeDialog();
    },
    reset(formName){
      const self = this
      self.$refs[formName].resetFields();
    },
    update(formName){
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
            let id = self.itemid;
            //key value 需要一一对应
            let keys = ['delay','delay_flex'];
            let valuse = [self.ruleForm.delayValue, self.ruleForm.delayFlexValue];
            api.updateItemProperties(id,keys,valuse).then((response) => {
              let data = response.data;
              if (id == data[0]) {
                self.$message({
                    type: 'info',
                    message: '更新成功'
                });
              }
            }).catch((err) => {
              self.$message({
                type: 'info',
                message: '更新失败'
              });
              console.log(err);
            });
            self.$message({
                type: 'success',
                message: '更新成功'
            });
            self.closeDialog();
            eventHubs.getEventHub().$emit('updateItemPropertiesSuccess');
        } else {
          return false;
        }
      });
    },
    beforeClose(done) {
      const self = this
      self.$confirm('确认关闭？')
        .then(_ => {
          self.close('ruleForm');
          done();
        })
        .catch(_ => {});
    },
    showDialog(){
      const self = this
      self.show = true;
    },
    closeDialog(){
      const self = this
      self.show = false;
    }
  }
}
</script>
